<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="bid-box com-box">
			<view class="bid-list">
				<view v-for="(item, index) in bidList" :key="index" class="bid-item">
					<view class="flex-item">
						<view class="left-wrapper">
							<view class="shop clamp">
								<image :src="item.sellerLogo" mode="aspectFill"></image>
								{{item.sellerName}}
							</view>
							<view class="clamp">
								<text class="num">出价：¥{{item.dealPrice}}/吨</text>
								<!-- <text class="size">定金：¥{{item.bidPrice}}</text> -->
							</view>
						</view>
						<view class="right-wrapper">
							<text @click="navToDetailPage(item)">点击查看资质</text>
							<button v-if="item.status != 2" type="default" @click="winBid(item)">确认中标</button>
							<button v-else type="default" @click="show(item)">已中标</button>
						</view>
					</view>
				</view>
			</view>
			<!-- #ifdef H5 -->
			<uni-pagination :num='pageNum' :page='pages' @pagechange="pagechange"></uni-pagination>
			<!-- #endif -->
			<uni-load-more class="sp" :status="loadingType"></uni-load-more>

			<uni-modal-next :show="bidShow" @close="cancel" title="下载合同" @cancel="cancel" @confirm="confirm">
				<view class="inner">
					<image v-show="contractUrl" style="width: 100%;padding: 20upx 0;" :src="contractUrl" mode="widthFix"></image>
					<view v-show="!contractUrl" style="width: 100%;padding: 40upx;text-align: center;">加载中...</view>
				</view>
			</uni-modal-next>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->

	</view>
</template>

<script>
	import uniModalNext from '@/components/uni-modal-next.vue'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	import uniPagination from '@/components/h5/uni-pagination.vue'
	export default {
		components: {
			uniModalNext,
			uniLoadMore,
			uniHeader,
			uniFooter,
			uniPagination
		},
		data() {
			return {
				id: '',
				bidShow: false,
				loadingType: 'more', //加载更多状态
				bidList: [],
				contractUrl: '',
				pageNum: 1,
				pageSize: 10,
				pages: 0,
			}
		},
		onLoad(option) {
			this.id = option.id
			this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh')
		},
		//加载更多
		onReachBottom() {
			this.loadData()
		},
		methods: {
			pagechange(currentPage) {
				console.log(currentPage)
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				uni.showLoading({
					title: '正在加载'
				})
				this.pageNum = currentPage
				this.loadData('current')
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(type = 'add') {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'more'
				}
				if (type === 'refresh') {
					this.pageNum = 1
				}
				this.$api.request('/publishingNeeds/jingbiaoPage', {
					publishingNeedsId: this.id,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, {
					method: 'GET'
				}).then(res => {
					let tempList = res.data.pageList
					if (type !== 'add') {
						this.bidList = []
					}
					this.pages = Math.ceil(res.data.total / this.pageSize)
					this.loadingType = this.pageNum < this.pages ? 'more' : 'nomore'
					this.bidList = this.bidList.concat(tempList)
					this.pageNum = this.pageNum + 1
					if (type !== 'add') {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			//详情
			navToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/bid/contract?id=${item.sellerId}`
				})
			},
			naviageToPage(page) {
				uni.navigateTo({
					url: page
				})
			},
			//投递
			winBid(item) {
				uni.showModal({
					title: '提示?',
					content: '您确定选择这家公司吗?',
					success: (e) => {
						if (e.confirm) {
							this.$api.request('/publishingNeeds/updateWinning', {
								id: item.id
							}).then(res => {
								this.$api.msg(res.message)
							})
						}
					}
				})
			},
			show(item) {
				this.$api.request('/publishingNeeds/winningLogId', {
					id: item.id
				}, {
					method: 'GET'
				}).then(res => {
					this.contractUrl = res.data.contractUrl
					this.$nextTick(() => {
						this.bidShow = true
					})
					// this.$api.msg(res.message)
				})
			},
			confirm() {
				this.bidShow = false
				uni.saveImageToPhotosAlbum({
					filePath: this.contractUrl,
					success: function() {
						this.$api.msg('保存成功')
					}
				});
			},
			cancel() {
				this.bidShow = false
			}
		},
	}
</script>

<style lang="scss">
	.container {
		// padding-bottom: 80upx;
	}

	.bid-box {
		padding-top: 20upx;
	}

	/* 投标列表 */
	.bid-list {
		margin: 0;

		.flex-item {
			display: flex;
			width: 100%;

			.left-wrapper {
				width: calc(100% - 160upx);
				padding-right: 20upx;
				font-size: $base-font-sm;
				line-height: 40upx;

				.shop {
					width: 100%;
					color: $base-color-dark;
					line-height: 80upx;
				}

				.size,
				.num {
					display: block;
					margin-left: 80upx;
					font-size: $base-font-base;
					color: $base-color-dark;
				}

				.size {
					font-size: $base-font-sm;
					color: $base-color-light;
				}

				image {
					margin-right: 20upx;
					vertical-align: top;
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					border: 1upx solid #D0E6FF;
					background-color: #D0E6FF;
				}
			}

			.right-wrapper {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				width: 160upx;
				font-size: $base-font-sm;
				color: $base-color-page;
				text-align: center;

				button {
					line-height: 60upx;
					height: 60upx;
					font-size: $base-font-sm;
					color: #fff;
					border: 0;
					border-radius: 30upx;
					background-color: $base-color-page;
				}
			}
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.bid-box {
			margin: 20px auto;
			padding: 0;
		}

		/* 投标列表 */
		.bid-list {
			margin: 0;
			border-radius: 0;
			overflow: hidden;

			.bid-item:last-child {
				border-bottom: 0;
			}
		}
	}

	/* #endif */
</style>
